import React from 'react';

import style from './index.less';

import { pageSealDefaultSize } from './form';

function getSignFromImageData(formData) {
  return formData?.data?.sealData;
}

class ShowPagingSeal extends React.Component {
  constructor() {
    super();
    this.state = {
      isEdit: false,
    };

    this.canvasRef = React.createRef();
  }

  drawImage = () => {
    let scale = this.props.scale || 1;
    const { formData, cutPagingSealMsg } = this.props;
    const { cutNums, currentCut } = cutPagingSealMsg;

    const canvasRef = this.canvasRef.current;

    canvasRef.addEventListener('click', this.onClickCanvas, { passive: false });

    const ctx = canvasRef.getContext('2d');

    const ratio = this.getPixelRatio(ctx);

    canvasRef.style.width = canvasRef.width + 'px';
    canvasRef.style.height = canvasRef.height + 'px';

    canvasRef.width = canvasRef.width * ratio;
    canvasRef.height = canvasRef.height * ratio;

    // 放大倍数
    ctx.scale(ratio, ratio);

    let imageData = getSignFromImageData(formData);

    const img = new Image();
    img.src = imageData;
    img.onload = () => {
      const dw = img.width;
      const dh = img.height;
      ctx.drawImage(
        img,
        pageSealDefaultSize.width * scale -
          ((pageSealDefaultSize.width * scale) / cutNums) * currentCut,
        0,
        pageSealDefaultSize.width * scale,
        (dh * pageSealDefaultSize.width * scale) / dw
      );
    };

    ctx.rect(
      ((pageSealDefaultSize.width * scale) / cutNums) * (cutNums - 1),
      0,
      pageSealDefaultSize.width * scale,
      canvasRef.height
    );
    // 定义裁剪区域
    ctx.clip();
  };

  componentDidMount() {
    this.drawImage();
  }

  shouldComponentUpdate(prevProps, prevState, snapshot) {
    // 避免重复渲染
    return !(prevProps.scale === this.props.scale);
  }

  componentDidUpdate() {
    this.drawImage();
  }

  onClickCanvas = e => {
    const {
      formData: { docId },
    } = this.props;
    this.props.onEditPagingSeal(true, docId);
    this.props.changeEditSeal();
    this.props.onActive();
  };

  getPixelRatio = context => {
    const backingStore =
      context.backingStorePixelRatio ||
      context.webkitBackingStorePixelRatio ||
      context.mozBackingStorePixelRatio ||
      context.msBackingStorePixelRatio ||
      context.oBackingStorePixelRatio ||
      context.backingStorePixelRatio ||
      1;
    return (window.devicePixelRatio || 1) / backingStore;
  };

  render() {
    let scale = this.props.scale || 1;
    const { formData, isActive, cutPagingSealMsg } = this.props;
    const { cutNums } = cutPagingSealMsg;
    const { offset } = formData;

    const canvasStyle = {
      right: 0,
      top: offset * scale + 'px',
      zIndex: 999,
      // width: (pageSealDefaultSize.width * scale) / cutNums + 'px',
      // height: pageSealDefaultSize.height * scale + 'px',
    };
    return (
      <>
        <canvas
          width={pageSealDefaultSize.width * scale}
          height={pageSealDefaultSize.height * scale}
          ref={this.canvasRef}
          className={style.canvasCutStyle}
          style={canvasStyle}
        >
          不支持canvas
        </canvas>
      </>
    );
  }
}

export { ShowPagingSeal };
